<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            display: flex;
        }

        input {
            margin-left: 10px;
        }

        #random_code {
            width: 80px;
            height: 30px;
            background-color: #ddd;
            margin-left: 10px;
            text-align: center;
            line-height: 30px;
            letter-spacing: 2px;
        }

        #refresh {
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <p>用户要求：名字只能包含数字、字母，数字不可以开头，长度不低于6，不长于12 [0-9 a-z A-Z]</p>
    <p>
        <label for="user">用户名</label>
        <input id="user" name="user" type="text">
        <span id="user_span"></span>
    </p>
    <p>密码6-12位 不能包含特殊字符 (弱 z/1/A 中 包含两种 强 包含三种)</p>
    <p>
        <label for="pwd">密码</label>
        <input id="pwd" name="pwd" type="text">
        <span id="pwd_span"></span>
    </p>
    <p>确认密码 两次输入相同</p>
    <p>
        <label for="repwd">确认密码</label>
        <input id="repwd" name="repwd" type="text">
        <span id="repwd_span"></span>
    </p>
    <p>随机4位验证码(点击切换验证码)</p>
    <p>
        <label for="code">验证码</label>
        <input id="code" name="code" type="text">
        <span id="random_code"></span>
        <button id="refresh">刷新验证码</button>
        <span id="code_span"></span>
    </p>
    <button id="btn">注册</button>


    <script>

        var numArr = [];
        for (var i = 0; i <= 9; i++) {
            // 数字转字符串
            numArr.push(i + '');
        }

        var smallArr = [] ;
        for(var i = 97 ; i <= 122 ; i++) {
            smallArr.push(String.fromCharCode(i)) ;
        }

        var bigArr = [] ;
        for(var i = 65 ; i <= 90 ; i++) {
            bigArr.push(String.fromCharCode(i)) ;
        }

        var allArr = numArr.concat(smallArr , bigArr) ;
        console.log(allArr) ;


        

        // 拿到对象
        // 获取显示验证码的span
        var oRandom_code = get('random_code') ;
        // 刷新按钮
        var oRefresh = get('refresh') ;

        // 获取用户名
        var oUser = get('user');
        var oUserSpan = get('user_span');

        // 获取按钮
        var oBtn = get('btn');


        // 1 页面打开就显示验证码
        oRandom_code.innerHTML = code() ;



        // 注册验证
        oBtn.onclick = function () {
            // 用户名验证
            var userVal = oUser.value;

            // 判断为空
            if (userVal === '') {
                oUserSpan.innerHTML = '用户名不能为空';
                oUserSpan.style.color = 'red';
                return;
            }

            // 判断长度
            if (userVal.length > 12 || userVal.length < 6) {
                oUserSpan.innerHTML = '用户名长度必须是6-12';
                oUserSpan.style.color = 'red';
                return;
            }

            // 数字不能开头 
            //   0-9 
            //   !isNaN()
            //   [0,1,2,3,4,5,6,7,8,9]  判断是否存在
            // if(!isNaN(userVal.charAt(0))) {}
            // if(numArr.includes(userVal.charAt(0))) {}
            if (userVal.charAt(0) >= 0 && userVal.charAt(0) <= 9) {
                oUserSpan.innerHTML = '用户名不能使用数字开头';
                oUserSpan.style.color = 'red';
                return;
            }

            // 不能使用数字和字母以外的符号  [a-zA-Z0-9]
            // 遍历用户名   
            for (var i in userVal) {
                // 如果不存在就报错
                if (arr.indexOf(userVal[i]) === -1) {
                    oUserSpan.innerHTML = '用户名只能是数字字母组成';
                    oUserSpan.style.color = 'red';
                    return;
                }
            }

            oUserSpan.innerHTML = '√';
            oUserSpan.style.color = 'green';


            // 密码验证


        }



        function get(id) {
            return document.getElementById(id)
        }

        function rand(min , max) {
            return parseInt(Math.random() * (max - min) + min)
        }

        function code(n) {
            // 短路赋值 
            n = n || 4 ;

            var res = '' ;

            for(var i = 0 ; i < n ; i++) {
                res += allArr[rand(0 , allArr.length)] ;
            }

            // 判断验证码是否满足条件
            //   不满足就调用code(n)
            //   满足就return res

            // 遍历验证码
            var flag1 = 0 , flag2= 0 , flag3 = 0 ;
            for(var i in res) {    
                // 只要有数字就可以
                if(numArr.includes(res[i])) {
                    flag1 = 1 ;
                    continue ;
                }
                 // 只要有大写就可以
                if(bigArr.includes(res[i])) {
                    flag2 = 1 ;
                    continue ;
                }
                 // 只要有小写就可以
                if(smallArr.includes(res[i])) {
                    flag3 = 1 ;
                }
            }

           

            if(flag1 + flag2 + flag3 === 3) {
                return res
            }
            
            return code(n) ;


            // var flag = 0 ;
            // for(var i in res) {
            //     if(numArr.includes(res[i])) {
            //         flag++ ;
            //         break ;
            //     }
            // }
            // for(var i in res) {
            //     if(smallArr.includes(res[i])) {
            //         flag++ ;
            //         break ;
            //     }
            // }
            // for(var i in res) {
            //     if(bigAll.includes(res[i])) {
            //         flag++ ;
            //         break ;
            //     }
            // }


        }












    </script>


</body>

</html>